<template>
    <div>
        <a-modal
        :dialog-style="{ top: '20px' }"
         v-model:visible="visible" 
         :title="formState.id?formState.view?'查看会议':'编辑会议'+formState.fzllx:'新增会议'"  
         @ok="handleOk" 
         @cancel="visible = false"
         class="plan-add-edit-modal"
         :width="1000"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="会议标题">
                        <a-input
                        v-model:value="formState.fhybt"
                        placeholder="请输入会议标题"
                        v-decorator="[
                            'fhybt', { initialValue:formState.fhybt, rules: rules.fhybt}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="会议摘要">
                        <a-input
                        v-model:value="formState.fhyzy"
                        placeholder="请输入会议摘要"
                        v-decorator="[
                            'fhyzy', { initialValue:formState.fhyzy, rules: rules.fhyzy}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="会议时间">
                        <a-date-picker
                        format="YYYY-MM-DD HH:mm"
                        v-model:value="formState.fhysj"
                        placeholder="请选择会议时间"
                        v-decorator="[
                            'fhysj', { initialValue:formState.fhysj, rules: rules.fhysj}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="会议类型">
                        <a-select
                            ref="select"
                            placeholder="请选择设备类型"
                            v-model:value="formState.fhylx"
                            v-decorator="[
                                'fhylx', { initialValue:formState.fhylx, rules: rules.fhylx}
                            ]"
                            >
                            <a-select-option value="支部党员大会">支部党员大会</a-select-option>
                            <a-select-option value="支委会">支委会</a-select-option>
                            <a-select-option value="小组会">小组会</a-select-option>
                            <a-select-option value="党课">党课</a-select-option>
                            <a-select-option value="其他">其他</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="会议地点"  class="flex-1-box">
                        <a-input
                        v-model:value="formState.fhydd"
                        placeholder="请输入会议地点"
                        v-decorator="[
                            'fhydd', { initialValue:formState.fhydd, rules: rules.fhydd}
                        ]"/>
                    </a-form-item>
                    
                    <a-form-item label="会议记录人员" class="flex-1-box">
                        <div>
                            <a-button class="blue-btn" type="primary" @click="selectRecordPeople(false)">选择会议记录人员</a-button>
                        </div>
                        <a-textarea 
                            readOnly
                            placeholder="请输入会议记录人员"
                            v-model:value="formState.fhyjlryxm"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            v-decorator="[
                                'fhyjlryxm', { initialValue:formState.fhyjlryxm, rules: rules.fhyjlryxm}
                            ]"
                        ></a-textarea>
                    </a-form-item>
                    <a-form-item label="会议参会人员" class="flex-1-box">
                        <div>
                            <a-button class="blue-btn" type="primary" @click="addPeople">添加人员</a-button>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <div v-for="(item,index) in fryList" :key="index" style="width: 20%;">
                                <span>{{ item.fxm }}</span>
                                <a-icon style="color: #ff8000;padding: 5px;font-size: 16px;" type="delete" @click="deleteClick(item)"/>
                            </div>
                        </div>
                    </a-form-item>
                    <a-form-item label="请假人员" class="flex-1-box">
                        <div>
                            <a-button class="blue-btn" type="primary" @click="addAskForLeave">添加人员</a-button>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <div v-for="(item,index) in askForLeaveList" :key="index" style="width: 20%;">
                                <span>{{ item.fxm }}</span>
                                <a-icon style="color: #ff8000;padding: 5px;font-size: 16px;" type="delete" @click="deleteClick(item)"/>
                            </div>
                        </div>
                    </a-form-item>
                    <a-form-item label="应到人数">
                        <a-input
                        v-model:value="formState.fydrs"
                        placeholder="请输入应到人数"/>
                        <!-- <span style="font-weight: 600;">{{ fryList.length + askForLeaveList.length }}人</span> -->
                    </a-form-item>
                    <a-form-item label="实到人数">
                        <a-input
                        v-model:value="formState.fsdrs"
                        placeholder="请输入应到人数"/>
                        <!-- <span style="font-weight: 600;">{{ fryList.length }}人</span> -->
                    </a-form-item>
                </a-form>
                
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
            <personnelList ref="personnelListRef2" @checkPersonnel="checkPersonnel2" :modaObj="{place:'',oldId:formState.fhyjlry?formState.fhyjlry.split(','):[]}" />
            <personnelList ref="personnelListRef1" @checkPersonnel="checkPersonnel1" :modaObj="{place:'',oldId:currentRYData.id?[currentRYData.id]:[]}" />
            <personnelList ref="personnelListRef3" @checkPersonnel="checkPersonnel3" :modaObj="{place:'',oldId:formState.fhyqjry?formState.fhyqjry.split(','):[]}" />
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import moment from 'moment'
import YchConstant from "@/api/YchConstant";
import blobType from '@/common/blobType'
import personnelList from '../../administrativeOffice-new/modal/personnelList.vue'
import {
    partyHyqueryHyjlCjryList,
    partyHyaddHyjlCjry,
    partyHyaddHyjlQjry,
    partyHydeleteHjjlCjry,
    partyHyqueryHyjlQjryList,
} from './service/index'
export default {
    components:{
        compSelector,
        personnelList,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fhybt: [{
                    required: true,
                    message: '请输入会议标题',
                    trigger: 'blur',
                }],
                fhydd: [{
                    required: true,
                    message: '请选择会议地点',
                    trigger: 'blur',
                }],
                fhylx: [{
                    required: true,
                    message: '请选择会议类型',
                    trigger: 'blur',
                }],
                fhyzy: [{
                    required: true,
                    message: '请输入会议摘要',
                    trigger: 'blur',
                }],
                fhyjlryxm: [{
                    required: true,
                    message: '请输入会议记录人员',
                    trigger: 'blur',
                }],
                fhysj: [{
                    type:'object',
                    required: true,
                    message: '请选择会议时间',
                    trigger: 'blur',
                }],
                fhyjgts: [{
                    type:'number',
                    required: true,
                    message: '请输入会议间隔天数',
                    trigger: 'blur',
                }],
                fsfxhzx: [{
                    required: true,
                    message: '请选择是否循环执行',
                    trigger: 'blur',
                }],
                // fyxzt: [{
                //     required: true,
                //     message: '请选择有效状态',
                //     trigger: 'blur',
                // }],
            },
            materialUnitList:[],
            uploadLoading:false,
            fryList:[],
            currentRYData:{},
            askForLeaveList:[],
            
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            //console.log(val)
            this.formState = {}
            this.formState = val
            this.fryList = []
            this.formState.fhysj = val.fhysj?moment(val.fhysj):''
            if(val.id){
                this.getPersonnel(val)
                this.getAskForLeave(val)
            }
        },
        getPersonnel(val){
            partyHyqueryHyjlCjryList({fhyid:val.id}).then(res=>{
                if(res.code == 200){
                    this.fryList = res.result.records
                }else{
                    this.fryList = []
                }
            })
        },
        getAskForLeave(val){
            partyHyqueryHyjlQjryList({fhyid:val.id}).then(res=>{
                if(res.code == 200){
                    this.askForLeaveList = res.result.records
                }else{
                    this.askForLeaveList = []
                }
            })
        },
        addPeople(){
            if(this.formState.id){
                this.currentRYData.id = ''
                this.$refs.personnelListRef1.personnelListVisible = true
                this.$refs.personnelListRef1.getData({place:'',oldId:[]})
            }else{
                this.$message.warning('请先保存会议')
            }
        },
        addAskForLeave(){
            if(this.formState.id){
                this.currentRYData.id = ''
                this.$refs.personnelListRef3.personnelListVisible = true
                this.$refs.personnelListRef3.getData({place:'',oldId:[]})
            }else{
                this.$message.warning('请先保存会议')
            }
        },
        checkPersonnel1(val,list,list2){
            partyHyaddHyjlCjry({fhyid:this.formState.id,fuserid:list.length?list.join(','):''}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getPersonnel(this.formState)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        checkPersonnel3(val,list,list2){
            partyHyaddHyjlQjry({fhyid:this.formState.id,fuserid:list.length?list.join(','):''}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getAskForLeave(this.formState)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        selectRecordPeople(){
            this.$refs.personnelListRef2.personnelListVisible = true
            this.$refs.personnelListRef2.getData({place:'',oldId:this.formState.fhyjlry?this.formState.fhyjlry.split(','):[]})
        },
        deleteClick(item){
            let that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    partyHydeleteHjjlCjry({id:item.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.getPersonnel(that.formState)
                            that.getAskForLeave(that.formState)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        
        checkPersonnel2(val,list,list2){
            this.formState.fhyjlry = list.length?list.join(','):''
            this.formState.fhyjlryxm = list2.length?list2.join('/'):''
            this.form.setFieldsValue({
                fhyjlryxm:list2.length?list2.join('/'):''
            });
        },
        
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{...this.formState,...values,fhysj:moment(this.formState.fhysj).format('YYYY-MM-DD HH:mm')},val)
                    }else{
                        this.$emit('addItem',{...this.formState,...values,fhysj:moment(this.formState.fhysj).format('YYYY-MM-DD HH:mm')},val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.plan-add-edit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 135px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>